<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="dist/vue.js"></script>
</head>

<body>
    <div id ="app"> 
        <my-com1></my-com1>
        <my-com2></my-com2>
        <my-com2/>
    </div>

    <template id="com1">
        <div>
            我是组件1
        </div>
    </template>
    <template id="com2">
        <div>
            我是组件2
        </div>
    </template>
    <script>

    const mymixins = {
        data(){
            return {
                msg: 'hello com1'
            }
        },
        created() {
            console.log('混入对象的钩子被调用');
        },
        mounted() {
            console.log(this.msg);
        }
    }
    const Com1 = {
        template: '#com1',
        mixins: [mymixins],
        data() {
            return {
                msg: 'hello com1'
            }
        },
        created: function () {
              console.log('com1组件钩子被调用')
        }
        // mounted() {
        //     console.log(this.msg)
        // }
    }

    const Com2 = {
        template: '#com2',
        mixins: [mymixins],
        data() {
            return {
                msg: 'hello com2'
            }
        },
        // mounted() {
        //     console.log(this.msg)
        // }
    }

    var app = new Vue({
        el: '#app',
        components: {
            'myCom1': Com1,
            'myCom2': Com2
        }    
    });
    </script>
</body>

</html>